<template>
  <div class="columnModel" id="columnModel">
    <!-- 功能按钮 -->
    <div class="columnModel_button">
      <a-dropdown :disabled="!btnPerm.includes('creatAble')">
        <a-button class="addButton" type="primary">
          <template #icon>
            <span class="iconfont icon-Add iconadd"></span>
          </template>
          新建
          <i class="iconfont icon-down" style="font-size: 24px; color: #ffffff; margin-left: 4px" />
        </a-button>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a @click="addRecord('全站模型')">全站模型</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="addRecord('本站模型')">本站模型</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <div class="modelSelect">
        模型范围：
        <a-select v-model:value="modelType" @change="typeChange" :options="typeOptions"></a-select>
      </div>
      <div class="modelSelectStatus">
        模型状态：
        <a-select v-model:value="modelStatusText" @change="statusChange" :options="statusOptions"></a-select>
      </div>
      <div class="searchContent">
        <a-input v-model:value="searchName" @blur="onSearch" @pressEnter="onSearch" placeholder="搜索模型名称" style="width: 192px">
          <template #suffix>
            <i class="iconfont icon-search" @click="onSearch"></i>
          </template>
        </a-input>
      </div>
    </div>
    <!-- 表格展示部分 -->
    <baseTable :columns="columns.columnModelColumns" :dataSource="configData.records" :isSelect="true" :scroll="scroll"
      ref="searchBaseTables" :isShowPagination="isShowPagination" :showCheckDelete="showCheckDelete"
      :total="configData.total" @deleteRecord="deleteSelectedAll" @changePage="changePage" disabledParam="status"
      :disabledValue="true">
      <template #headerCell="{column}">
                <template v-if="column.key === 'status'">
                  <div class="tpllPc">
                  <span class="title">{{ column.title }}</span>
              <a-tooltip placement="right">
                <template #title>
                  <span>模型状态为开启时才可以进行配置</span>
                </template>
                <span style="color: #1c6bec;" class="iconfont icon-hint"></span>
              </a-tooltip>
                <span class="tips">模型状态为开启时才可以进行配置</span>
                </div>
                </template>
              </template>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a class="eidtRecords" :class="{ disable: !btnPerm.includes('renameAble') }" @click="eidtRecord(record)">{{
            record.oparation[0] }}</a>
          <a class="eidtRecords" :class="record.hideOption || !btnPerm.includes('editModelAble') ? 'disable' : ''
            " @click="eidtModelRecord(record)">{{ record.oparation[1] }}</a>
          <a-popconfirm placement="topRight" :disabled="record.hideOption || !btnPerm.includes('deleteAble')"
            @confirm="confirmDelete(record)">
            <template #title>
              <p style="width: 197px">是否删除此模型</p>
            </template>
            <a :class="record.hideOption || !btnPerm.includes('deleteAble') ? 'disable' : ''
              ">{{ record.oparation[2] }}</a>
          </a-popconfirm>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <a-switch @click="switchChange(record)" size="small" v-model:checked="record.status" />
        </template>
      </template>
      <template #otherOpration>
        <a-button :style="{ 'margin-left': '8px' }" @click="deleteSelectedAll"
          :disabled="!rowSelection.length">删除</a-button>
      </template>
    </baseTable>
    <!-- 新建模型名称模态框 -->
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      @handleOk="buttonMessage" @handleCancle="handleCancle" v-if="isVisible" class="modal_manage">
      <template v-slot:body>
        <a-form name="advanced_search" class="ant-advanced-search-form" autoComplete="off" :model="formState"
          ref="cloumnModelFrom">
          <a-form-item :name="['modelName', 'value']" :label="formState.modelName.label"
            :rules="[formState.modelName.rule]">
            <a-input v-model:value="formState.modelName.value" show-count :maxlength="25" allow-clear />
          </a-form-item>
          <a-form-item :name="['modelType', 'value']" :label="formState.modelType.label"
            :rules="[formState.modelType.rule]">
            <span>{{ formState.modelType.value }}</span>
          </a-form-item>
          <div class="add-area">
            <a-form-item :name="['Dir_list', 'value']" :label="formState.Dir_list.label" class="select-item">
              <div v-for="(item, index) in formState.Dir_temp_list" :key="index">
                <a-form-item class="otherFormItems">
                  <div class="select-box-item">
                    <a-form-item-rest>
                      <a-select style="width: 140px" v-model:value="item.templateDir" placeholder="请选择模板方案"
                        @change="changeProgram(index)" @select="clickContentList(item, index)"
                        :options="formState.Dir_list.options.map((item: dataSourceType) => ({ value: item.id, label: item.name, disabled: item.disabled }))"></a-select>
                    </a-form-item-rest>
                    <a-form-item-rest>
                      <a-select v-if="item.templateDir" mode="multiple" style="width: 340px; margin-left: 8px"
                        placeholder="请选择模板" v-model:value="item.templatePaths" ref="usermanage_treeSelect" show-search
                        :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }" allow-clear :maxTagTextLength="10"
                        :maxTagCount="2"
                        :options="(item?.options || []).map((item: dataSourceType) => ({ value: item.id, label: item.name })) || []">
                      </a-select>
                    </a-form-item-rest>
                    <i class="iconfont i-delete" @click="deleteTempSelectList(index)">&#xe8e2;</i>
                  </div>
                </a-form-item>
              </div>
            </a-form-item>


            <div class="add-new" :class="formState.Dir_temp_list.length <= 0
              ? 'hidd-margin'
              : formState.Dir_temp_list.length >= formState.Dir_list.options.length
                ? 'disable'
                : ''
              ">
              <span @click="addDir_temp_list"> 新增模板方案</span>

            </div>
          </div>
        </a-form>
      </template>
    </base-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick, createVNode, watch } from "vue";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import { useRouter } from "vue-router";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import { Modal, message } from "ant-design-vue";
import request from "@/api/index";
import { scrollType, modeProp } from "@/type.d";
import baseInfoJson from "./baseInfo";
import { defaultLeftComp } from "../editModel/defaultLeftComp";
import { routerPerm } from "@/utils/common";
// import { itemForm } from "@components/draggable/clounms/accessPath/accessPathSettings/formConfig";
const btnPerm = ref<any[]>([]);
// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}

//porps
const props = defineProps({
  contentModelType: {
    type: Number,
    defult: 1,
  },
});
// form 表单验证
const modelNameCheck = async (_rule: dataSourceType = {}, value: any) => {
  console.log(_rule, value);
  if (!value) {
    return Promise.reject(`${_rule.msg1}`);
  } else {
    var params = {
      modelType: router.currentRoute.value.fullPath.includes("columnModel")
        ? 1
        : router.currentRoute.value.fullPath.includes("contentModel")
          ? 2
          : 3,
      name: formState.modelName.value,
      type: formState.modelType.value == "本站模型" ? 0 : 1,
      id: formState.id || undefined,
    };
    if (_rule.api) {
      let res = await request[`${_rule.api}`](params);
      if (!res) {
        return Promise.reject(`${_rule.msg2}`);
      } else {
        return Promise.resolve();
      }
    }
  }
};

const contentJosn = { contentComps_left: defaultLeftComp, contentComps_right: [] };
console.log(contentJosn, "contentJosn");
//data
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const isShowPagination = true; // 是否需要配分页器
const showCheckDelete = true; // 是否需要分页器中的自定义全选和删除
const modelStatusText = ref<string>("全部");
const modelType = ref<string>("全部");
const typeValue = ref<string | number>("");
const statusValue = ref<string | number>("");
const formStatus = ref<boolean>(true);
const router = useRouter();
//表格数据
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
const searchBaseTables = ref<any>(null);
let rowSelection = ref<(string | number)[]>([]);
const deleteArr = ref<(string | number)[]>([]);
const searchName = ref<string>("");
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(10);
// 模态框数据
const isAddOrEdit = ref<boolean>(true); //判断是新建、编辑或者批量上传来复用模态框
const isVisible = ref<boolean>(false);
const isInitBaseJson = ref<boolean>(false);
const treeData = ref<any>([]);
const treeDataList = ref<any>([]);
const singleCol = ref<any[]>([]);
const mulCol = ref<any[]>([]);
const siteData = ref<dataSourceType[]>([]);
const TempList = ref<dataSourceType[]>([]);
let modAlProps: modeProp = reactive({
  width: "M",
  title: "新建栏目模型",
});

const typeOptions = [{ value: "全部" }, { value: "全站" }, { value: "本站" }];
const statusOptions = [{ value: "全部" }, { value: "启用" }, { value: "禁用" }];
const cloumnModelFrom = ref<any>("cloumnModelFrom");
const formState = reactive<dataSourceType>({
  modelName: {
    value: "",
    rule: {
      required: true,
      trigger: ["blur"],
      msg1: "模型名称不可为空！",
      msg2: "模型名称重复!",
      validator: modelNameCheck,
      api: "checknModelName",
      params: {},
    },
    label: "模型名称",
  },
  modelType: {
    value: "",
    rule: {
      required: false,
      params: {},
    },
    label: "模型范围",
  },
  modelStatus: {
    value: "",
    rule: {
      required: false,
      params: {},
    },
    label: "模型状态",
  },
  Dir_temp_list: <dataSourceType[]>[{
    templateDir: undefined,
    templatePaths: [],
    placeholder: "请选择",
    tempOptions: [],
  }],
  TempList: <dataSourceType[]>[],
  siteValue: undefined,
  Dir_list: {
    value: false,
    rule: {
      required: false,
      validator: modelNameCheck,
      trigger: ["change", "bulr"],
      msg1: "请选择模板方案！",
    },
    options: [],
    label: "模板选择",
  },
  id: "",
});
const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改
// watch
watch(() => formState.Dir_temp_list, (newVal, oldVal) => {
  let arr = newVal.map((item: any) => item.templateDir) || [];
  formState.Dir_list.options.forEach((item: any) => {
    if (arr.includes(item.name)) {
      item.disabled = true;
    } else {
      item.disabled = false;
    }
  })
}, { deep: true })
// computed
rowSelection = computed(() => {
  return searchBaseTables.value.selectedRowKeys;
});
//methods

//切换模型状态
const switchChange = (record: any) => {
  let params: dataSourceType = {
    id: record.id,
  };

  request[record.status ? "fetchColumnModelEnable" : "fetchColumnModelDisable"](params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        getRdecord();
        message.success(res.message);
      } else {
        configData.records.length &&
          configData.records.forEach((item: any) => {
            if (item.id == record.id) {
              item.status = record.status ? false : true;
            }
          });
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

const addRecord = async (type: string) => {
  //新加模型名称模态框条件修改
  //添加模型名称数据
  isVisible.value = true;
  isAddOrEdit.value = true;
  formStatus.value = true;
  formState.modelName.value = "";
  formState.modelType.value = type;
  formState.id = "";
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
    {
      text: "保存并继续新建",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
  if (router.currentRoute.value.fullPath.includes("contentModel")) {
    modAlProps.title = "新建内容模型";
  } else if (router.currentRoute.value.fullPath.includes("columnModel")) {
    modAlProps.title = "新建栏目模型";
  }
};

const eidtRecord = async (item: dataSourceType) => {
  if (!btnPerm.value.includes("renameAble")) return;
  //编辑模型名称数据
  isAddOrEdit.value = true;
  isVisible.value = true;
  if (router.currentRoute.value.fullPath.includes("contentModel")) {
    modAlProps.title = "编辑";
  } else if (router.currentRoute.value.fullPath.includes("columnModel")) {
    modAlProps.title = "编辑";
  }
  formStatus.value = item.status;
  formState.modelName.value = item.modelName;
  formState.modelType.value =
    item.type === "全站" ? "全站模型" : item.type === "本站" ? "本站模型" : "";
  formState.id = item.id;
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
  request.columnModelEdit_Detail({ id: item.id }).then((res: any) => {
    formState.Dir_temp_list = res.modelTemplates || [{
      templateDir: undefined,
      templatePaths: [],
      placeholder: "请选择",
      tempOptions: []
    }];
    formState.Dir_temp_list.forEach((item: any, index: number) => {
      getTemplateListByDir(item.templateDir, index)
    })
  })
};
const eidtModelRecord = async (item: dataSourceType) => {
  if (item.status || !btnPerm.value.includes("editModelAble")) {
    return;
  }
  //编辑模型名称数据
  console.log(router.currentRoute, "router.currentRoute");
  if (router.currentRoute.value.fullPath == "/config/modelManage/contentModel") {
    router.push({
      path: "/config/modelManage/contentModel/editContentModel",
      query: {
        id: item.id,
        name: item.modelName,
      },
    });
  } else if (router.currentRoute.value.path == "/config/modelManage/columnModel") {
    router.push({
      path: "/config/modelManage/columnModel/editColumnModel",
      query: {
        id: item.id,
        name: item.modelName,
      },
    });
  }
};
// 关闭模态框
const handleCancle = () => {
  formStatus.value = true;
  formState.modelName.value = "";
  formState.id = "";
  isVisible.value = false;
  formState.Dir_temp_list = [{
    templateDir: undefined,
    templatePaths: [],
    placeholder: "请选择",
    tempOptions: [],
  }]

}
const buttonMessage = async (msg: dataSourceType) => {
  // 新添或编辑模型名称调取接口
  //保存
  cloumnModelFrom.value
    .validate()
    .then(() => {
      let params: dataSourceType = {
        modelType: props.contentModelType,
        name: formState.modelName.value,
        id: formState.id,
        status: formStatus.value ? 1 : 0,
        type:
          formState.modelType.value === "全站模型"
            ? 1
            : formState.modelType.value === "本站模型"
              ? 0
              : "",
        modelTemplates: formState.Dir_temp_list,

      };
      let type: string = modAlProps.title.includes("编辑") ? "Edit" : "Add";

      request[type === "Edit" ? "fetchColumnModelUpdate" : "fetchColumnModelAdd"](params)
        .then((res: any) => {
          if (res.code == "00000 00000") {
            if (type === "Add") {
              isInitBaseJson.value = true;
            }
            formState.Dir_temp_list = [{
              templateDir: undefined,
              templatePaths: [],
              placeholder: "请选择",
              tempOptions: [],
            }]
            getRdecord();
            message.success(res.message);
          } else {
            message.error(res.message);
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
      formStatus.value = true;
      formState.modelName.value = "";
      formState.id = "";
      isVisible.value = msg.text == "保存" ? false : true;
    })
    .catch(() => { });
};

//保存基础模型
const saveColumnModel = (id: number) => {

  const params = {
    enableJson: JSON.stringify(
      props.contentModelType === 1 ? baseInfoJson.baseInfoJson : contentJosn,
      function (key, val) {
        if (typeof val === "function") {
          return val + "";
        }
        return val;
      }
    ),
    modelId: id,
  };
  request
    .fetchModelItemUpdate(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        isInitBaseJson.value = false;
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

const confirmDelete = async (item: any) => {
  if (item.status) {
    return;
  }
  // 删除单个模型
  deleteArr.value = [item.id];
  deleteRecords(deleteArr.value);
};

const deleteSelectedAll = async () => {
  //删除已选所有模型
  let keys = rowSelection.value;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: "您确定删除选中的模型？",
      content: "",
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",
      }),
      okText: "确定",
      onOk: async () => {
        await deleteRecords(keys);
        Modal.destroyAll();
      },
      onCancel() {
        Modal.destroyAll();
      },
    })
  );
};
const deleteRecords = async (keys: (string | number)[] = []) => {
  // 调接口删除模型
  await request.fetchColumnModelDelete({ ids: keys }).then((res: any) => {
    if (res.code == "00000 00000") {
      message.success(res.message);
      getRdecord({});
    } else {
      message.error(res.message);
    }
  });
};

const typeChange = () => {
  //模型范围
  typeValue.value = modelType.value === "全站" ? 1 : modelType.value === "本站" ? 0 : "";
  getRdecord();
};
const statusChange = () => {
  //模型状态
  statusValue.value =
    modelStatusText.value === "启用" ? 1 : modelStatusText.value === "禁用" ? 0 : "";
  getRdecord();
};
const onSearch = async () => {
  //搜索获取数据参数配置
  getRdecord();
};
const getRdecord = async (datas: dataSourceType = {}) => {
  // 获取表格数据
  const data: {} = {
    modelType: props.contentModelType,
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
    name: searchName.value || "",
    status: statusValue.value,
    type: typeValue.value,
  };
  const telData = (await request.fetchColumnModelData(data)) || {};
  let reqData = telData;
  let sourceData = ref<dataSourceType[]>([]);
  const records: any[] = [];
  reqData?.records?.map((item: any, index: number) => {
    sourceData = {
      ...item,
      oparation: ["编辑", "模型配置", "删除"],
      type: item.type == 1 ? "全站" : "本站",
      modelType: item.modelType,
      status: item.status == 1 ? true : false,
      modelName: item.modelName,
      updateTime: item.updateTime,
      id: item.id,
    };
    records.push(sourceData);
  });
  records.length &&
    records.forEach((item: dataSourceType) => {
      if (item.status) {
        item.hideOption = true;
      } else if (!item.status) {
        item.hideOption = false;
      }
    });
  configData.total = reqData.total;
  configData.size = reqData.size;
  configData.records = records;
  searchBaseTables.value.selectedRowKeys = [];
  if (isInitBaseJson.value && records.length) {
    saveColumnModel(records[0].id);
  }
  nextTick(() => {
    scroll.y = getTableScroll(74, "columnModel").y;
    scroll.isFixed = getTableScroll(74, "columnModel").isFixed;
  });
};

// 模板选择相关
//模板方案变动
const changeProgram = (e: any) => {
  formState.columnValue = null;
};
//点击获取模板方案
const clickContentList = (item: any, index: number) => {
  getTemplateListByDir(item.templateDir, index);
};
const deleteTempSelectList = (index: number) => {
  formState.Dir_temp_list.splice(index, 1);
  mulCol.value[index] && mulCol.value.splice(index, 1);
  TempList.value = [...singleCol.value, ...mulCol.value];
};
const addDir_temp_list = () => {
  // 添加栏目
  formState.Dir_temp_list.push({
    templateDir: undefined,
    templatePaths: [],
    placeholder: "请选择",
    tempOptions: [],
  });
};
const getTemplateListByDir = async (
  templateDir: number | string,
  index?: any
) => {
  const postData = {
    templateDir,
    templateType: props.contentModelType,
  };
  const list = (await request.getTemplateList(postData)) as any;
  nextTick(() => {
    let arr: any[] = [];
    list.forEach((item: any) => {
      let obj = {
        id: item,
        name: item
      }
      arr.push(obj);
    });
    formState.Dir_temp_list[index].options = arr;
  })
};
//获取全部模板方案
const fetchContentAllSiteList = async () => {

  let res = await request.fetchTemplateFolderList();
  nextTick(() => {
    res.forEach((item: any) => {
      let obj = {
        id: item,
        name: item,
      }
      formState.Dir_list.options.push(obj);
    })
  })
};
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getRdecord(datas);
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
};
//onmounted
onMounted(() => {
  console.log(props.contentModelType);
  btnPerm.value = routerPerm();
  getRdecord();
  fetchContentAllSiteList();
});
</script>
<style lang="scss" scoped>
.columnModel {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;.tpllPc {
        display: flex;
        align-items: center;
        .title {
          margin-right: 5px;
        }
        .tips {
          display: inline-block;
          margin-left: 5px;
            width: 125px;
            font-size: 12px;
            color:rgba(0,0,0,.4);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
      }
  .columnModel_button {
    padding-bottom: 16px;
    display: flex;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }

    .modelSelect {
      margin-left: auto;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .modelSelectStatus {
      margin-left: 4px;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .searchContent {
      margin-right: 0px;

      .icon-search {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 12px;
        top: 0px;
      }
    }
  }

  :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
    margin-right: 16px;
  }

  .eidtRecords {
    margin-right: 16px;
  }

  .disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
}

.model-tip {
  margin-top: 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

.tag-item {
  margin-bottom: 0 !important;
}

:deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
}

::v-deep(.ant-input-number) {
  width: 136px;
  margin-left: 4px;
}

::v-deep(.ant-input-affix-wrapper) {
  width: 509px;
  margin-left: 4px;
}

::v-deep(.ant-form-item) {
  display: flex;

  .ant-form-item-label {
    flex-grow: 0;
    width: 80px;
    text-align: right;
  }
}

::v-deep(.ant-select) {
  width: 96px;
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }

  .ant-input-show-count-suffix {
    // display: none;
  }
}

::v-deep(.anticon-close-circle) {
  display: none;
}

::v-deep(.ant-btn) {
  padding: 4px 12px;
}
</style>
<style lang="less">
.modal_manage {
  .add-area {
    .ant-form-item {
      margin-bottom: 8px;
    }
  }



  .select-box-item {
    .i-delete {
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      margin-left: 6px;

      &:hover {
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }

  .add-new {
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-top: 8px;
    display: flex;
    width: 570px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--theme_text_hightlight_color, #1f6ded);
    line-height: 14px;
    margin-top: 8px;
    text-align: right;
    cursor: pointer;
  }

  .disable {
    display: none;
  }
}
</style>
